<template>
  <el-card shadow="never" :style="{height:cardH}">
    <div slot="header" class="clearfix fs-15">
      <span class="fw-b">近期任务</span>
    </div>
    <ul>
      <li v-for="item in list" :key="item.id" class="d-flex mb-20">
        <div class="flex__item">
          <router-link
            :to="{name:'TaskDetail',params:{id:item.id}}"
            tag="p"
            class="title text-hiDDen mr-30"
          >
            <el-link type="primary">{{item.taskName}}</el-link>
          </router-link>
          <div class="mt-5 fs-12">
            <span class="creator">{{item.creator}}</span>
            <span>【发布：{{item.createTime}}】</span>
          </div>
        </div>
        <div>
          <el-link
            :type="taskState[item.operateStatus].type"
            :underline="false"
          >{{taskState[item.operateStatus].name}}</el-link>
        </div>
      </li>
    </ul>
  </el-card>
</template>

<script>
import { mapGetters } from "vuex";
import { getLatestTaskList } from "api/home";
import dayjs from "dayjs";
export default {
  props: ["cardH"],
  data() {
    return {
      list: []
    };
  },
  computed: {
    ...mapGetters(["taskState"])
  },
  created() {
    console.log(this.taskState);
    this.loadData();
  },
  methods: {
    loadData() {
      getLatestTaskList().then(res => {
        this.list = res.data.map(o => {
          o.createTime = o.createTime
            ? dayjs(o.createTime).format("YYYY-MM-DD HH:mm:ss")
            : "";
          return o;
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "styles/variables.scss";
ul {
  li {
    span {
      color: $fontGray;
      flex-shrink: 0;
    }
    .title {
      width: 75%;
    }
    .creator {
      display: inline-block;
      width: 50px;
    }
  }
}
</style>
